<!DOCTYPE html>
<html class='no-js' lang='en'>

<head>
    <meta charset='utf-8'>
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
    <title>湘北高中密码更改系统</title>
    <meta content='lab2023' name='author'>
    <meta content='' name='description'>
    <meta content='' name='keywords'>
    <link rel="stylesheet" href="/css/bootstrap.css">
    
    <style>
        .loginbox {
            background-color: rgba(255, 255, 255, 0.5);
        }
        
        body {
            background: url("/images/bg5.jpg") center top no-repeat;
            background-size: cover;
            padding: 0;
        }
        
        #tip, #tip_loginErr {
            display: none;
        }
    
    </style>
</head>

<body class=''>
<!--导航-->
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">湘北高中选修课报名</a>
        </div>
        
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/">选课报名</a></li>
                <!--<li><a href='/stuCourse'>我的选课</a></li>-->
                <li class="active"><a href="/changePassword">密码修改</a></li>
            </ul>
            
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">用户: <%= username %></a></li>
                <li ><a href="/logout">退出登录</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container">
    <!--如果没有改过密码那么才显示提示条-->
    <% if(!showTips) { %>
    <div class="alert alert-danger" role="alert" id="tips">系统检测到你正在使用初始密码登录，处于安全考虑必须修改密码后才能进入报名系统</div>
    <% } %>
    <div class="row loginbox">
        <div class="col-lg-5">
            <h2>修改密码</h2>
            <hr>
            <form id="loginForm">
                <p>
                    原密码:
                </p>
                <p>
                    <input type="text" class="form-control" id="oldPassword" name="oldPassword">
                </p>
                <!--警告框-->
                <div>
                    <div class="alert alert-danger" role="alert" id="tip">学号必须是6位数字</div>
                </div>
                
                <p>
                    新密码:
                </p>
                <p>
                    <input type="password" class="form-control" name="newPassword" id="newPassword">
                </p>
                <!--警告框-->
                <div>
                    <div class="alert alert-danger" role="alert" id="tip_loginErr"></div>
                </div>
                <p>
                    <input type="button" class="btn btn-success" value="登录" disabled id="submitbtn">
                </p>
            </form>
        </div>
    </div>
</div>


<!-- Javascripts -->
<script src="/js/lib/jquery-1.10.min.js" type="text/javascript"></script>
<script src="/js/lib/bootstrap.min.js" type="text/javascript"></script>
<script>
  //  密码修改提交逻辑
  var $oldPassword = $('#oldPassword')
  var newPassword = $('#newPassword')
  var $submitbtn = $('#submitbtn')
  var $tip_loginErr = $('#tip_loginErr')
  
  newPassword.on('blur', function () {
    // console.log($(this).val())
    //    验证是否都有输入
    if ($(this).val()) {
      $submitbtn.attr('disabled', false)
    }
  })
  
  $submitbtn.on('click', function () {
    //    获得旧密码和新密码进行匹配
    
    if ($oldPassword.val() == newPassword.val()) {
      //  如果用户输入的原密码和新密码相同那么提示不能提交
      $tip_loginErr.show().html('原密码和新密码不能相同')
    } else {
      //  匹配成功后发送ajax
      $.ajax({
        type: 'POST',
        url: '/changePassword',
        dataType: 'json',
        data: {
          newPassword: newPassword.val(),
        },
      }).done(function (data) {
        if (data.err) {
          alert(data.msg)
        } else {
          //    跳转到登录界面
          window.location = '/logout'
        }
      }).fail(function () {
        alert('请求失败')
      })
    }
  })

</script>

</body>

</html>